<template>
  <div class="flowNodeMember">
    <el-dialog
      title="添加审核人"
      :visible.sync="dialogs.addNodeMember"
      :append-to-body="true"
      width="30%"
    >
      <el-tree
        :props="treeProps"
        :data="treeData"
        :default-expand-all="true"
        show-checkbox
        ref="tree"
      ></el-tree>
      <br />
      <br />
      <el-row>
        <el-col :span="3" :offset="9">
          <el-button type="primary" @click="save()">添加</el-button>
        </el-col>
      </el-row>
    </el-dialog>

    <el-row>
      <el-col :span="3">
        <el-button type="primary" @click="dialogs.addNodeMember = true">添加审核人</el-button>
      </el-col>
    </el-row>
    <br />
    <br />
    <el-row>
      <el-col>
        <el-table :data="list" :border="true">
          <el-table-column fixed prop="memberId" label="成员ID" width="50"></el-table-column>
          <el-table-column prop="memberName" label="成员名" width="150"></el-table-column>
          <el-table-column prop="groupName" label="组织名" width="200"></el-table-column>
          <el-table-column prop="isUse" label="是否启用" width="200">
            <template slot-scope="scope">
              <span v-if="scope.row.isUse">是</span>
              <span v-else>否</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="danger"  @click="deleteNodeMember(scope.row.id)" icon="el-icon-delete" size="mini" circle ></el-button>
              <el-button type="danger" @click="updateNodeMemberIsUse(scope.row.id)" size="mini" circle>
                <span v-if="scope.row.isUse">禁用</span>
                <span v-else>启用</span>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import qs from "qs";

export default {
  name: "FlowNodeMember",
  components: {},
  props: ["fNodeId"],
  watch: {
    fNodeId(val) {
      this.nodeId = val;
      this.findAllNodeMember();
    }
  },
  data() {
    return {
      dialogs: {
        addNodeMember: false
      },
      list: [],
      nodeId: null,
      treeProps: {
        label: "name",
        children:'members',
        disabled: "disabled"
      }
      ,treeData:[]
    };
  },
  created() {
    this.nodeId = this.fNodeId;
    this.findAllNodeMember();
  },
  methods: {
    findAllNodeMember() {
      //调用服务
      var that = this;
      this.$axios
        .get("node/findAllNodeMember", {
          params: { id: this.nodeId }
        })
        .then(res => {
          let data = res.data;
          if (data.code === 0) {
            this.list = data.data;
          } else {
            this.$message.error(data.msg);
          }
        })
        .catch(function(error) {
          console.log("axios请求异常:" + error);
          that.$message.error("网路请求异常");
        });
        //调用服务
      this.$axios
        .get("node/getAddNodeMemberTreeData", {
          params: { id: this.nodeId }
        })
        .then(res => {
          let data = res.data;
          if (data.code === 0) {
            this.treeData = data.data;
          } else {
            this.$message.error(data.msg);
          }
        })
        .catch(function(error) {
          console.log("axios请求异常:" + error);
          that.$message.error("网路请求异常");
        });
    },
    deleteNode(id) {
      //调用服务
      var that = this;
      this.$axios
        .get("node/delete", {
          params: { id: id }
        })
        .then(res => {
          let data = res.data;
          if (data.code === 0) {
            this.$message({ message: data.msg, type: "success" });
            this.findNode();
          } else {
            this.$message.error(data.msg);
          }
        })
        .catch(function(error) {
          console.log("axios请求异常:" + error);
          that.$message.error("网路请求异常");
        });
    },
    save() {
      const waitAdd = JSON.parse(
        JSON.stringify(this.$refs.tree.getCheckedNodes(true, false))
      );
      console.log(waitAdd);
      //添加成员的时候给成员添加组织Id
      let waitAddString = "";
      if (waitAdd.length == 0) {
        this.$message.error("未选择审核人");
        return;
      }
      //判断选择的人是否重复
      for (var i = 0; i < waitAdd.length; i++) {
        const data = waitAdd[i];
        if (
          this.$xia17Util.arrayContainTwiceIf(waitAdd, e => {
            return e.id == data.id;
          })
        ) {
          this.$message.error("选择的数据有重复审核人:" + data.name);
          return;
        }
      }
      //提交给后台的参数
      const waitAddMembers = new Array();
      for (var i = 0; i < waitAdd.length; i++) {
        //显示将要提交的信息
        waitAddString = waitAddString + waitAdd[i].name;
        if (i != waitAdd.length - 1) {
          waitAddString += "；";
        }
        //数据转换
        waitAddMembers.push({
          nodeId: this.nodeId,
          memberId: waitAdd[i].id,
          groupId: waitAdd[i].groupId
        });
      }
      this.$confirm("你将添加：" + waitAddString, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          //调用服务
          var that = this;
          this.$axios
            .post("node/addNodeMembers", waitAddMembers)
            .then(res => {
              let data = res.data;
              if (data.code === 0) {
                this.$message({ message: data.msg, type: "success" });
                this.findAllNodeMember();
              } else {
                this.$message.error(data.msg);
              }
            })
            .catch(function(error) {
              console.log("axios请求异常:" + error);
              that.$message.error("网路请求异常");
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消添加"
          });
        });
    },
    //删除审核人
    deleteNodeMember(id) {
      var that = this;
      this.$confirm("你确定要删除吗", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          //调用服务
          this.$axios
            .get("node/deleteNodeMember", {
              params: { 'nodeMemberId' :id }
            })
            .then(res => {
              let data = res.data;
              if (data.code === 0) {
                this.$message({ message: data.msg, type: "success" });
                this.findAllNodeMember();
              } else {
                this.$message.error(data.msg);
              }
            })
            .catch(function(error) {
              console.log("axios请求异常:" + error);
              that.$message.error("网路请求异常");
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //启用或禁用审核人
    updateNodeMemberIsUse(id) {
      var that = this;
      //调用服务
      this.$axios
        .get("node/updateNodeMemberIsUse", {
          params: { 'nodeMemberId' :id }
        })
        .then(res => {
          let data = res.data;
          if (data.code === 0) {
            this.$message({ message: data.msg, type: "success" });
            this.findAllNodeMember();
          } else {
            this.$message.error(data.msg);
          }
        })
        .catch(function(error) {
          console.log("axios请求异常:" + error);
          that.$message.error("网路请求异常");
        });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
</style>



